<template>
  <div class="task-tree">
    <div class="task-tree__content">
      <template v-for="(item, categoryIdx) in data" :key="item.categoryId">
        <div
          v-show="item.isVisible || !hasMore"
          class="task-tree__content-block"
        >
          <div class="task-tree__content-header">
            {{ `${categoryIdx + 1} ${item.name}` }}
          </div>
          <nut-collapse v-model="collapseNames" :border="false">
            <nut-collapse-item
              v-for="(categoryItem, catalogIdx) in item.children"
              :key="categoryItem.categoryId"
              :name="categoryItem.code"
              v-show="categoryItem.isVisible || !hasMore"
            >
              <template #title>{{
                `${categoryIdx + 1}.${catalogIdx + 1} ${categoryItem.name}`
              }}</template>
              <div
                v-for="(child, childIdx) in categoryItem.children"
                v-show="child.isVisible || !hasMore"
                :key="child.code"
                class="task-tree__item"
                @click="onPreview(child.articleId)"
              >
                <div className="task-tree__item-title">
                  <image
                    v-if="!child.isFinish"
                    src="@/assets/home/icon-play-normal.png"
                    class="play-normal"
                  />
                  <image
                    v-else
                    src="@/assets/home/icon-play-disabled.png"
                    class="play-normal"
                  />
                  <span
                    :class="[child.isFinish && 'is-disabled']"
                    class="task-tree__item-title_label"
                  >
                    {{
                      `${categoryIdx + 1}.${catalogIdx + 1}.${childIdx + 1} ${
                        child.name
                      }`
                    }}
                  </span>
                </div>
                <div className="task-tree__item-video">
                  <image
                    v-if="child.banner"
                    :src="child.banner"
                    mode="aspectFit"
                    class="task-tree__item-video_banner"
                  />
                  <image
                    v-else
                    src="@/assets/index/well-bg.png"
                    mode="aspectFit"
                    class="task-tree__item-video_banner"
                  />
                  <div class="task-tree__item-video_time">
                    <span class="play-btn"></span>
                    02:05
                  </div>
                </div>
                <div class="task-tree__item-line"></div>
              </div>
            </nut-collapse-item>
          </nut-collapse>
        </div>
      </template>

      <div v-if="hasMore" class="task-tree__content-bottom" @click="onloadMore">
        全部任务
        <span class="task-tree__content-bottom_arrow"></span>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ICatalogItem } from "@/apis/types/knowledge";
import { ref, watch } from "vue";

defineOptions({
  name: "task-tree",
});

const props = withDefaults(
  defineProps<{
    data: ICatalogItem[];
  }>(),
  {
    data: () => [],
  }
);
const emits = defineEmits(["preview"]);

const collapseNames = ref<string[]>([]);
const hasMore = ref(true);
const onPreview = (id: number) => {
  emits("preview", id);
};

const onloadMore = () => {
  hasMore.value = false;
};

watch(
  () => props.data,
  (val) => {
    if (val && val.length) {
      val.forEach((item) => {
        const { children } = item;
        if (children && children.length) {
          children.forEach((child) => {
            collapseNames.value.push(child.code);
          });
        }
      });
    }
  }
);
</script>

<style lang="less">
.task-tree {
  // position: relative;
  &__group {
    padding: 6px 16px;
    box-sizing: border-box;
    background: #f5f5f5;
    border-radius: 4px;

    font-weight: 400;
    font-size: 32px;
    color: #8b8b8b;
    line-height: 44px;
    margin-bottom: 24px;
    p {
      margin-top: 24px;
    }
  }

  &__content {
    --nut-collapse-wrapper-content-padding: 24px 0;
    --nut-collapse-item-padding: 6px 20px;
    &-block {
      &:not(:last-child) {
        margin-bottom: 20px;
      }
    }
    &-header {
      font-weight: 400;
      font-size: 32px;
      color: #8b8b8b;
      line-height: 44px;
      background-color: #f5f5f5;
      border-radius: 4px 4px 0 0;
      padding: 6px 20px;
      box-sizing: border-box;
    }
    .nut-collapse {
      &-item {
        &__title {
          background-color: #f5f5f5;
          color: #898989;
          font-size: 32px;
          border-radius: 4px;
        }
      }
    }
    &-bottom {
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 4px;
      margin-top: 20px;
      font-weight: 400;
      font-size: 28px;
      color: #898989;
      line-height: 40px;
      &_arrow {
        width: 0;
        height: 0;
        border-left: 10px solid transparent;
        border-right: 10px solid transparent;
        border-bottom: 0 solid transparent;
        border-top: 16px solid #898989;
      }
    }
  }
  &__item {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 68px;
    --line-show: hidden;
    &-title {
      flex: 1;
      width: 0;
      display: flex;
      align-items: flex-start;
      gap: 16px;
      .play-normal,
      .play-disabled {
        flex-grow: 0;
        flex-shrink: 0;
        width: 40px;
        height: 40px;
      }

      &_label {
        font-weight: 400;
        font-size: 28px;
        color: #8b8b8b;
        line-height: 40px;
        &.is-disabled {
          color: #000000;
        }
      }
    }
    &-video {
      flex: 0 0 220px;
      position: relative;
      width: 220px;
      height: 136px;
      // background: #d8d8d8;
      border-radius: 4px;
      // background-image: url("@/assets/index/well-bg.png");
      // background-size: 100% 100%;
      // background-repeat: no-repeat;
      &_banner {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
      }
      &_time {
        display: flex;
        align-items: center;
        gap: 6px;
        position: absolute;
        right: 10px;
        bottom: 10px;
        background: #000000;
        opacity: 0.49;
        padding: 2px 8px;

        font-weight: 400;
        font-size: 24px;
        color: #ffffff;
        line-height: 34px;
        .play-btn {
          width: 0;
          height: 0;
          border-left: 20px solid #fff;
          border-right: 0 solid transparent;
          border-bottom: 15px solid transparent;
          border-top: 15px solid transparent;
        }
      }
    }
    &-line {
      visibility: var(--line-show);
      position: absolute;
      left: 18px;
      top: 50px;
      width: 0;
      height: calc(100% - 30px);
      border-left: 2px dashed #979797;
    }
    &:not(:last-child) {
      margin-bottom: 40px;
      --line-show: visible;
    }
  }
}
</style>
